<template>
  <l-data-panel v-if="data._isInit" :label="config.title">
    <div
      @click="handleClick(1)"
      class="l-data-board l-rblock"
      style="box-shadow: none; float: left; width: 33.333%"
    >
      <div class="l-data-board__icon" :style="{ color: '#FF0033' }">
        <div
          class="l-data-board__icon__bg"
          :style="{ 'background-color': '#FF0033' }"
        ></div>
        <i class="el-icon-s-order"></i>
      </div>
      <div class="l-data-board__text">
        <div class="l-data-board__num">
          <l-count-up :end="nCompletedNum"></l-count-up>
        </div>
        <div class="l-data-board__title">{{ $t("待办任务") }}</div>
      </div>
    </div>
    <div
      @click="handleClick(2)"
      class="l-data-board l-rblock"
      style="box-shadow: none; float: left; width: 33.333%"
    >
      <div class="l-data-board__icon" :style="{ color: '#FF8000' }">
        <div
          class="l-data-board__icon__bg"
          :style="{ 'background-color': '#FF8000' }"
        ></div>
        <i class="learun-icon-entrust"></i>
      </div>
      <div class="l-data-board__text" >
        <div class="l-data-board__num">
          <l-count-up :end="delegateNum"></l-count-up>
        </div>
        <div class="l-data-board__title">{{ $t("委托任务") }}</div>
      </div>
    </div>
    <div
      @click="handleClick(3)"
      class="l-data-board l-rblock"
      style="box-shadow: none; float: left; width: 33.333%"
    >
      <div class="l-data-board__icon" :style="{ color: '#6FC86F' }">
        <div
          class="l-data-board__icon__bg"
          :style="{ 'background-color': '#6FC86F' }"
        ></div>
        <i class="el-icon-finished"></i>
      </div>
      <div class="l-data-board__text">
        <div class="l-data-board__num">
          <l-count-up :end="completedNum"></l-count-up>
        </div>
        <div class="l-data-board__title">{{ $t("已办任务") }}</div>
      </div>
    </div>
  </l-data-panel>
</template>
<script>
import { mapGetters } from "vuex";
const api = window.$api.workflow.process;
import viewMixins from "../mixins/view";
export default {
  props: ["data", "isPreview"],
  mixins: [viewMixins()],
  data() {
    return {
      nCompletedNum: 0,
      completedNum: 0,
      delegateNum: 0,
    };
  },
  computed: {
    ...mapGetters(["modules"]),
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const queryData = {
        rows: 1,
        page: 1,
        sidx: "t.F_CreateDate DESC",
      };
      // 加载代办任务
      const unCompletedData = await this.$awaitWraper(
        api.getUnCompletedMyPage(queryData,{})
      );
      // 加载已办任务
      const completedData = await this.$awaitWraper(
        api.getCompletedMyPage(queryData,{})
      );
      // 加载委托任务
      const delegateData = await this.$awaitWraper(
        api.getDelegateMyPage(queryData)
      );

      this.nCompletedNum = unCompletedData.records;
      this.completedNum = completedData.records;
      this.delegateNum = delegateData.records;
    },
    handleClick(type) {
      if (!this.isPreview) {
        const module = this.modules.find((t) => t.f_EnCode == "NWFProcess");
        if (module) {
          switch (type) {
            case 1: // 代办任务
              this.$router.push({
                path: `${module.f_UrlAddress}?type=uncompleted`,
              });
              break;
            case 2: // 委托任务
              this.$router.push({
                path: `${module.f_UrlAddress}?type=delegate`,
              });
              break;
            case 3: // 已办任务
              this.$router.push({
                path: `${module.f_UrlAddress}?type=completed`,
              });
              break;
          }
        }
      }
    },
  },
};
</script>

